<template>
    <div class="mine-box">
        <header>
            <div class="two">
                <van-icon name="setting-o" @click="show = true" />
                <van-icon name="service-o" />
            </div>
            <div class="user">
                <img src="../../images/demoimg.jpeg">
                <span>男孩</span>
            </div>
            <div class="collect">
                <ul>
                    <li>
                        <span>6</span>
                        <p>收藏</p>
                    </li>
                    <li>
                        <span>2</span>
                        <p>我的关注</p>
                    </li>
                    <li>
                        <span>4</span>
                        <p>我的足迹</p>
                    </li>
                    <li>
                        <span>5</span>
                        <p>优惠券</p>
                    </li>
                </ul>
            </div>
        </header>
        <main>
            <div class="order">
                <div class="order_">
                    <h5>我的订单</h5>
                    <span>全部订单<van-icon name="arrow" /></span>
                </div>
                <div class="order__">
                    <ul>
                        <li>
                            <van-icon name="pending-payment"/>
                            <span>待付款</span>
                        </li>
                        <li>
                            <van-icon name="underway-o" />
                            <span>待发货</span>
                        </li>
                        <li>
                            <van-icon name="logistics"/>
                            <span>待收货</span>
                        </li>
                        <li>
                            <van-icon name="gold-coin-o" />
                            <span>退款/售后</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="vip">
                <p>开通VIP，享受商品折扣+好友返利</p>
                <button>立即开通</button>
            </div>
            <div class="order tool">
                <div class="order_">
                    <h5>我的工具</h5>
                </div>
                <div class="order__">
                    <ul class="tool_">
                    <li>
                        <van-icon name="location-o" />
                        <span class="mini3">收货地址</span>
                    </li>
                    <li>
                        <van-icon name="coupon-o" />
                        <span class="mini3">尺码信息</span>
                    </li>
                    <li>
                        <van-icon name="records-o" />
                        <span class="mini3">意见反馈</span>
                    </li>
                    <li>
                        <van-icon name="medal-o" />
                        <span class="mini3">商家入驻</span>
                    </li>
                    <li>
                        <van-icon name="guide-o" />
                        <span class="mini3">绑邀请码</span>
                    </li>
                </ul>
                </div>
            </div>
        </main>
        <van-action-sheet
            v-model:show="show"
            cancel-text="取消"
            close-on-click-action
        >
            <div style=" border-bottom:3px solid #F7F8FA">个人信息</div>
            <div @click="back">退出登录</div>`
        </van-action-sheet>
    </div>
</template>

<script lang="ts" setup>
import { showConfirmDialog } from 'vant';
import { ref, Ref } from 'vue';
import { AUTO_CACHE_KEY, PINIA_CACHE_KEY } from '../../config/common.cfg';
import { Router, useRouter } from 'vue-router';

const show:Ref<boolean> = ref(false)
const router:Router = useRouter()

/** 退出登录 */
function back() {
    showConfirmDialog({
        title: '是否要退出',
    })
    .then(() => {
        localStorage.removeItem(AUTO_CACHE_KEY)
        sessionStorage.removeItem(PINIA_CACHE_KEY)
        router.push('/login')
    })
    .catch(() => {
        show.value = false
    })
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.mine-box {
    width: 100vw;
    height: 100%;
    position: relative;
    background-color: rgb(248, 248, 248);

    header {
        width: 100%;
        height: 220px;
        background-color: #ebebeb;
        border-radius: 0 0 20px 20px;
        padding-top: 20px;

        .two {
            float: right;

            .van-icon {
                margin-right: 30px;
                font-size: 24px;
            }
        }

        .user {
            width: 100%;
            height: 80px;
            padding-left: 40px;
            margin-top: 20px;
            display: flex;
            align-items: center;

            img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }

            span {
                margin-left: 20px;
            }
        }

        .collect {
            width: 100%;

            ul {
                width: 100%;
                height: 80px;
                display: flex;
                justify-content: space-around;
                align-items: center;

                li {
                    display: flex;
                    flex-direction: column;
                    text-align: center;

                    span {
                        font-size: 18px;
                        font-weight: bolder;
                    }

                    p {
                        font-size: 14px;
                        margin-top: 6px;
                        color: @c3;
                    }
                }
            }
        }
    }

    main {
        width: calc(100% - 20px);
        position: absolute;
        left: 10px;
        top: 200px;

        .order {
            width: 100%;
            height: 160px;
            background-color: @g1;
            border-radius: 20px;
            padding: 0 4px;

            .order_ {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                border-bottom: 1px solid @c4;

                span {
                    font-size: 12px;

                    .van-icon {
                        margin-left: 8px;
                    }
                }
            }

            .order__>ul {
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: 120px;

                li {
                    display: flex;
                    flex-direction: column;
                    text-align: center;

                    .van-icon {
                        font-size: 34px;
                    }

                    span {
                        font-size: 12px;
                        margin-top: 8px;
                    }
                }
            }
        }

        .vip {
            width: 100%;
            height: 64px;
            background-color: @c1;
            margin-top: 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            p {
                font-size: 16px;
                color: @c5;
            }

            button {
                background-color: #67553B;
                font-size: 16px;
                padding: 6px;
                color: #D7C1A1;
                border-radius: 20px;
            }
        }

        .tool {
            height: 210px;
            .tool_ {
                flex-wrap: wrap;
                justify-content: space-between !important;

                li {
                    margin: 10px;
                }
                span {
                    font-size: 14px !important;
                }
            }
        }
    }

    .van-action-sheet {
        div {
            width: 100%;
            text-align: center;
            padding: 16px 20px;
            font-size: 16px;
        }
    }
}

::v-deep .van-action-sheet__content{
        height: 110px;
    }
</style>